<template>
	<div>
		<div id="tabelexcel">
			<!-- 表格 -->
			<ProTable ref="proTable" title="分类" :columns="columns" :requestApi="RequestCategoryList">
				<!-- 表格 header 按钮 -->
				<template #tableHeader>
					<el-button type="primary" :icon="CirclePlus">新增分类</el-button>
					<el-button type="primary" :icon="Upload" plain>批量添加分类</el-button>
					<el-button type="primary" :icon="Upload">
						<el-upload
							ref="uploadRef"
							class="upload-demo"
							action="#"
							:show-file-list="false"
							:auto-upload="true"
							:http-request="bindImportExcel"
						>
							<template #trigger>
								<span>导入excel</span>
							</template>
						</el-upload>
					</el-button>
				</template>
				<!-- 表格操作 -->
				<template #operation>
					<el-button type="primary" link :icon="View">查看</el-button>
					<el-button type="primary" link :icon="EditPen">编辑</el-button>
					<el-button type="primary" link :icon="Delete">删除</el-button>
				</template>
			</ProTable>
		</div>
	</div>
</template>

<script setup lang="tsx">
import { excelImport } from '@/utils/xlsxutil.ts'
import ProTable from '@/components/ProTable/index.vue'
import type { ColumnProps } from '@/components/ProTable/interface'
import type { Good } from '@/api/interface'
import { CirclePlus, Delete, EditPen, Download, Upload, View, Refresh } from '@element-plus/icons-vue'
import { api } from '@/api'
const { RequestCategoryList } = api
// 表格配置项
const columns: ColumnProps<Good.Category>[] = [
	{ type: 'selection', fixed: 'left', width: 80 },
	{ type: 'index', label: '#', width: 80, },
	{ prop: 'id', label: '序列号', width: 180 ,search: { el: "input" }},
	{ prop: 'name', label: '分类名称' , search: { el: "input" }},
	{ prop: 'operation', label: '操作', fixed: 'right', width: 330 }
]

//导入
const bindImportExcel = (data: any) => {
	excelImport(data.file, document.getElementById('tabelexcel'))
}
</script>

<style lang="scss" scoped>
.upload-demo {
	.el-button {
		width: 80px;
		height: 20px;
		font-size: 12px;
	}
}

// 因为我们的innerhtml是后添加的，也就是vue编译的时候它没赶上，data-xxx
:deep(table) {
	width: 100%;
	border-collapse: collapse;
	margin: 0 auto;
	text-align: center;
	td,
	th {
		min-height: 80px;
		height: 30px;
		border: 1px solid #cad9ea;
		color: #666;
	}
	thead th {
		background-color: #cce8eb;
		width: 100px;
	}
	tr:nth-child(odd) {
		background: #fff;
	}
	tr:nth-child(even) {
		background: #f5fafa;
	}
}
</style>
